import React from 'react';
import { Collapse, List, Avatar } from 'antd';
import './index.css'
const { Panel } = Collapse;

const data = [
  {
    id: 1,
    question: '这个商品有多少种颜色可选？',
    answer: '该商品有红色、蓝色和黑色三种颜色可选。',
    author: '张三',
    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    datetime: '2023-12-10 09:30:00',
  },
  {
    id: 2,
    question: '这个商品的尺寸是多少？',
    answer: '该商品的尺寸为30cm x 50cm。',
    author: '李四',
    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    datetime: '2023-12-08 14:20:00',
  },
  {
    id: 3,
    question: '这个商品有多少种颜色可选？',
    answer: '该商品有红色、蓝色和黑色三种颜色可选。',
    author: '张三',
    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    datetime: '2023-12-10 09:30:00',
  },
  {
    id: 4,
    question: '这个商品的尺寸是多少？',
    answer: '该商品的尺寸为30cm x 50cm。',
    author: '李四',
    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    datetime: '2023-12-08 14:20:00',
  },
  // 可根据需求添加更多问题及回答
];

const FAQPage = () => {
  return (
    <div className='box'>
      <Collapse accordion>
        {data.map(item => (
          <Panel header={item.question} key={item.id}>
            <p>{item.answer}</p>
            <List.Item.Meta
              avatar={<Avatar src={item.avatar} />}
              title={item.author}
              description={item.datetime}
            />
          </Panel>
        ))}
      </Collapse>
    </div>
  );
};

export default FAQPage;
